<template>
  <div class="home" ref="home">
    <Header></Header>
    <SmartList v-if="smartSearchValue" :smartSearchValue="smartSearchValue"></SmartList>
    <template v-else>
    <Banner></Banner>
    <Sort
      v-if="isGetDecade && isGetGroup && isGetLocal"
      :decadeTypeList="decadeTypeList"
      :groupTypeList="groupTypeList"
      :LocalTypeList="LocalTypeList"
    ></Sort>
  </template>
    <Footer></Footer>
    <toTop></toTop>
    <SmartSearch></SmartSearch>
  </div>
</template>
<script>
import SmartSearch from "@/components/smartSearch.vue";
import SmartList from '@/views/smartList/smartList.vue'
import toTop from "@/components/toTop.vue";
import Footer from "@/components/footer.vue";
import List from "@/views/list/list.vue";
import Header from "@/components/head.vue";
import Banner from "@/components/banner.vue";
import Sort from "@/components/sort.vue";
import { searchDecade, searchLocal, searchTypes } from "@/api/all";
import { mapState, mapMutations } from "vuex";
export default {
  components: {
    Header,
    Banner,
    Sort,
    Footer,
    List,
    toTop,
    SmartSearch,
    SmartList
  },
  data() {
    return {
      isGetDecade: false, //解决父子组件传值的异步问题
      isGetGroup: false, //解决父子组件传值的异步问题
      isGetLocal: false, //解决父子组件传值的异步问题
      decadeTypeList: [],
      groupTypeList: [],
      LocalTypeList: [],
    };
  },
  computed: {
    ...mapState("app", ["loading"]),
    ...mapState("list", ["smartSearchValue"]),
  },
  mounted() {
    this.init();
    this.$bus.$on("smartSearch", (smartSearchValue) => {
     this.SET_smartSearchValue(smartSearchValue)
    });
  },
  methods: {
    ...mapMutations("app", [
      "setLoading",
    ]),
    ...mapMutations("list", [
      "SET_smartSearchValue"
    ]),
    ...mapMutations("sort", [
      "SET_DECADETYPE",
      "SET_GROUPTYPE",
      "SET_LOCALTYPE",
    ]),
    async init() {
      //获取后端年代分类数据
      await searchDecade()
        .then((res) => {
          if (res.data.code === 200) {
            this.decadeTypeList = res.data.data.decadeTypeList;
            this.isGetDecade = true;
            this.SET_DECADETYPE(this.decadeTypeList);
          }
        })
        .catch((error) => {
          console.log(error);
        });

      //获取后端材质分类数据
      await searchTypes()
        .then((res) => {
          if (res.data.code === 200) {
            this.groupTypeList = res.data.data.groupTypeList;
            this.isGetGroup = true;
            this.SET_GROUPTYPE(this.groupTypeList);
          }
        })
        .catch((error) => {
          console.log(error);
        });

      //获取后端地域分类数据
      await searchLocal()
        .then((res) => {
          if (res.data.code === 200) {
            this.LocalTypeList = res.data.data.LocalTypeList;
            this.isGetLocal = true;
            this.SET_LOCALTYPE(this.LocalTypeList);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>
<style scoped>
.home {
  background: #5f806f;
  /* height: auto;
  overflow: auto;  */
}
</style>